Esto que vemos no es más que un pasatiempo de esos que surgen a raíz de algo que vemos y decidimos probar, el resultado es una pequeña galería que podemos añadir al footer o alguna página estática.
No hay límite de imágenes y aunque en el ejemplo el borde es de color gris en cualquier blog las imágenes se mostrarán con el borde que tengamos definido para las imágenes de los post, si no tuviéramos borde entonces se mostraría tal y como vemos en el ejemplo.

Los estilos los añadiremos justo antes de ]]></b:skin>

#galeria ul {
 overflow: hidden;
 padding-top: 5px;
}
#galeria ul li {
 display: inline;
}
#galeria ul li a {
 display: block;
 float: left;
 width: 200px;
 margin: 0 10px 20px;
}
#galeria ul li a img {
 display: block;
 width: 200px;
 height: 125px;
 margin: -5px 0 0 -5px;
 border: 5px solid rgb(250, 250, 250);
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
 border-color: rgb(235, 235, 235);
}
#galeria ul li a:active img {
 margin: -4px 0 -1px -5px;
}
#galeria ul li a span {
 width: 195px;
 position:relative;
 height: 20px;
 display: block;
 color: rgb(242, 242, 242);
 font-size: 15px;
 line-height: 18px;
 letter-spacing: 0px;
 word-spacing: 3px;
 text-transform: uppercase;
 padding: 2px;
 background-color: #191919;
 margin-top: -30px;
 text-indent: 4px;
 /*+opacity:70%;*/
 filter: alpha(opacity=70);
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 -moz-opacity: 0.7;
 opacity: 0.7;
}
#galeria ul li.newfaces-icon a span {
 display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
 color: rgb(205, 72, 72);
}
Y el HTML allí donde deseamos mostrarlo.

<section id="galeria">
<ul>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
</ul>
</section>

Donde URL-IMAGEN lo sustituimos por la url de nuestra imagen a mostrar, en Título añadimos el texto y en URL-ENLACE es el espacio para añadir la url del sitio si deseamos que la imagen sea un enlace.

Las imágenes miden 200 x 150 las del ejemplo son gentileza de Wallpapers a full
Cocina

Muy bueno!me gusta mucho esto de las galerias
gracias por el aporte.
saludos!:D

Responder
Cult

Esto esta genial para posters de películas
Gracias ;)

Responder
Beben Koben

not bad...hehehe :D
i have share to master vagabundia the great trick with CSS on one web?
do you interest?

Responder
Adrián J. Messina

Excelente y estético, en especial para nosotros los que usamos imágenes.
Vamos a ver que sale. Gracias Gem@.

Responder
Henry Herrera

Genial, otro truco que me va a ser de utilidad, al hacer click en las imagenes de tu ejemplo, da un error (blog no existe).

Una pregunta mas, esto funcionaria tambien para la sidebar? o hay que aplicarle el truco de la plantilla forte para lograr hacerla funcionar.

Responder
Henry Herrera

Blogger Cambio por completo, lo puedes ver en Blogger Draft lamentablemente por ningun lado encuentro como modificar mi plantilla clasica y por estar "adivinando" le di en una opcion que no queria y me la destruyo, en blogger te dicen que guardaron una copia de la misma pero no hay link para recuperarla, bendito backup que siempre hago.

Responder
Gem@

:: Cocofansclub me alegra que te guste :)

:: Watesam eres de los que ves más allá, quiero decir que cuando ves algo ya está imaginando como quedaría aplicado a tu idea :)

:: Beben Koben no entiendo :S si me interesa compartir en una web??

:: Adrián J. Messina gracias a ti por comentar :)

:: Henry, es cierto que da error porque no añadí enlace y el ejemplo está en un iframe por eso se muestra así. Voy a solucionarlo :)
El ejemplo es válido para cualquier sitio que admita html, hay que tener en cuenta el tamaño de las imágenes y el espacio donde se va a añadir ¿ qué te refier4es con el truco de la plantilla forte?? :S
Por lo que entiendo que dicen en Blogger Draft lo que harán será ir cambiando paulatinamente el diseño de la interfaz, pienso que eso no alterará nada la plantilla, no sé si estoy en un error.
Cuidado donde tocamos que no todo es reversible, menos mal que fuiste precavido :D

Responder
Henry Herrera

Lo del diseño de la plantilla Forte: En bTemplates la encuentras, es una plantilla que justo tiene los 6 cuadros que tu tienes en la sidebar (en donde esta tu publicidad).

Intente ademas pegar mi plantilla anterior al nuevo diseño pero no se dejo (blogger dice que aun le faltan modulos y que estan trabajando en ellos) pero estan tan "exitados" (su famosa palabrita) que querian que probaramos el nuevo diseño (menos mal no fabrican automoviles), asi que solo resta esperar.

Responder
Gem@

:: Entiendo, te refieres que si podrás añadir esos cuadritos en tu sidebar y la galería, pues no veo inconveniente ya que las dos cosas están realizadas con css.

Te he leído no una vez ni dos sino tres veces y no salgo de mi asombro eso de no poderprobar la plantilla te ocurre en todos los blogs o sólo en ese?
Yo no he visto aún el nuevo diseño :S

Responder
Henry Herrera

Tengo 4 blog 2 de prueba y dos funcionando.

Al blog que por error le di actualizar la plantilla, cuando regrese a blogger normal, ya no aparece la opcion Editar Diseño (ver capturas).

Al otro que le agregue una plantilla de las "antiguas" en blogger draft, al regresar al blogger normal se mira igual como siempre se ha visto.

A mi lo que me inquieta es que en una parte de la plantilla en blogger draft dice:
Tendras que actualizar tu plantilla
Puede que pierdas gran parte de los cambios que hayas realizado anteriormente

Sera que en un futuro nos van a obligar a que usemos las plantillas nuevas, es muy pronto para afirmarlo, pero ya me esta dando miedito, que todo lo que aprendimos se vaya por la borda.

Lo de la actualizacion dicen que es progresiva para los usuarios. Te dejo con algunas capturas, que le hice al blog para que veas un poco de lo que "ya no hay"

http://img27.imageshack.us/img27/6993/screenshoot01.jpg
http://img10.imageshack.us/img10/3037/screenshoot02.jpg
http://img163.imageshack.us/img163/5370/screenshoot03.jpg

Responder
Henry Herrera

Las primeras 2 corresponden a lo nuevo en blogger draft

La tercera es del blog que le di actualizar, ojo que yo borre el codigo que me dio y luego le di copy/paste de mi plantilla y como no funciono regrese a blogger normal, le di reemplazar la plantilla por la minina pero como vez sigue sin aparecer la parte en donde arrastras tus gadgets.

Espero que sea solo yo el del problema y que pronto se solucione. Ahora solo resta esperar y tenerle paciencia a los exitados chicos de google.

Responder
Gem@

:: Henry, eso que veo que es la tercera captura es lo que vemos cuando se está utilizando una plantilla clásica de las que se usaban hace cuatro años y era necesario trabajar todo sobre la plantilla en edición html.

Los gadgest se muestran en plantilla de diseño cuando usamos la versión que dice "Plantillas de diseño (lanzado en 2006)"

Espero que con esos nuevos cambios la forma de personalizar la plantilla la respeten y nos dejen seguir usando a nuestra elección :S

Responder
Beben Koben

name of a website, great trick with CSS only ;)

Responder
Kirei

Hola Gema, justamente estaba por preguntarte sobre la nueva "vista" de blogger y al igual que Henry no encuentro por ningun lado la opción que teníamos para modificar las plantillas, que chasco!!! busque y rebusque y nada, falta algo que a mi parecer es esencial sobre todo para quienes tenemos plantillas modificadas a nuestro gusto, ojala se solucione pronto, otra cosa que note es que tampoco funciona la opción de que aparezca código predeterminado en las entradas (es decir, yo tenia unos botoncitos para que aparecieran siempre en las nuevas entradas y ahora nada:(

Te envio un saludo y crucemos los dedos para que nos den un blogger mejorado y no arruinado, un abrazo desde Argentina.

Responder
Kirei
Este comentario ha sido eliminado por el autor.
Responder
Henry Herrera

Hola Gemma exacto la tercera captura es de blogger "Clasico" pero como vez no aparece la pestaña en donde se mueven y agregan gadgets, sabes como lo resolvi.

Agregue una plantilla de las nuevas en blogger "Clasico" y lo grabe, luego agregue una plantilla minima 2006 y super me dejo y aparecieron mis gadget, subi mi plantilla anterior y listo.

Les dejo el tip por si alguien por error modifico la plantilla en el nuevo blogger y no le salen los gadgets.

Responder
Gem@

:: Beben Koben con CSS se pueden hacer infinidad de cosas :)

:: Kirei por lo que parece Blogger está implementando el nuevo diseño de la interfaz, tengo entendido que se irá incorporando paulatinamente en todos los blogs.

:: Henry, esto es muy confuso, porque las noticias que tenía era que el cambio se realizaría en la interfaz, es decir lo veríamos en escritorio y en plantilla de diseño pero no sabía que algunas funciones serían suprimidas.
Me temo que habrá que empezar de nuevo a familiarizarse.

Responder
★★★★★ Oliver ★★★★★

Hola Gema! Se ve muy bien la galeria..gracias por compartirla! la verdad he estado siguiendo tu blog desde muy poco y hasta hoy me decidi por comentar.

Responder
Cêz

Que bonita entrada hiciste, Gema!

Me gusta mucho esa idea de añadir una galería para el blog, me preguntaba, es posible hacerlo en un gadget tipo html para situarlo en alguna sidebar?

Responder
Gem@

:: Bienvenido B de blogger, agradezco tu comentario :)

:: Céz se puede añadir en cualquier sitio que admita html como por ejemplo un gadget :)
El problema que yo veo es el limite de espacio que da una sidebar.

Responder
Cêz

Eso pensé! muchas gracias por responderme tan rapido que hasta me pregunto que si serás SuperGema con aversión a la kriptonita? jejeje :D

Esta entrada irá a Mis Favoritos.

Responder
★★★★★ Oliver ★★★★★

Por cierto Gema ya te enteraste que Blogger in Draft, ha colocado la opción para poner nuestro propio favicon.

Responder
Gem@

:: Céz lo de responder rápido no siempre es posible debido al cambio de hora, alguna vez da la casualidad que estoy conectada y veo llegar el comentario a mi mail de ahí esta rapidez :)

:: B de blogger, lo vi esta mañana y estuve probando, no escribí sobre el tema porque aunque la opción está no parece que funcione 100%

Responder
Balthazar Hawke

:D Que genial esta esto! Gracias Gem@, la rato intentare hacer una galeria!

Responder
Gem@

:: Suerte Balthier :)

Responder
OCRE dg

Holaaa!!! IMPRESIONANTE lo tuyo man!!! sos un re groso. con esto me solucionaste una gran duda con respecto a como presentar mis trabajos. Mira: http://ocredg.blogspot.com/p/trabajos-portfolio.html fijate que las imagenes me salen escalonadas, y reviso por todos lados y no se porque. Por otro lado como hago para incluir mas imagenes? cipio y pego el mismo codigo de cada imagen? claro que cambiando el link de la imagen y el <a ref=

Responder
Gem@

:: OCRE dg en el código veo muchas etiquetas br eso son saltos de línea, debería ir sin esa etiqueta. También se vería mejor si se añaden algunas imágenes :)

Responder
OCRE dg

FANTABULOSO!!!!! listo y arreglado... gracias!!!
Tus aportes son exelentes.

Responder
Gem@

:: Estupendo OCRE dg :)

Responder
kawsaqi

brabazo, broth, no encuentro la manera de centrar todo eso, me pregunto si me puedes dar alguna ayuda en ese tema,de antemano un abrazo,, buen post

Responder
Gem@

:: Lo veo centrado en tu blog kawsaqi y me encanta tu banner ¿lo hiciste tu??

Responder
kawsaqi

mi problema es: cuando abro con google chrome sale estupendo, dos columnas y tres filas pero cuando abro, o u otro seguidor abre por Internet explorer que mas usan, se ve muy mal distorsionado, porfa si alguien me puede dar una ayuda o alguna recomendación aquí les dejo mi blog, importacioneskb.blogspot.com

Responder
Gem@

:: kawsaqi si tu blog se viera mal con todos los navegadores tendrías un gran problema pero son tus visitas que lo ven mal ¿no será de ellos el problema? pregúntales cuando fue la última vez que actualizaron su navegador.
Yo uso Firefox y se ve perfecto :)

Responder
kawsaqi

GEM@, ME DI CON LA SORPRESA DE QUE SE VEÍA MAL CUANDO EN UNOS DÍAS, ENTRE EN OTRA MÁQUINA FUERA DE CASA Y QUISE VER MI BLOG, DESASTROSAMENTE ASÍ LO VEN MIS CLIENTES, NADA FORMAL TODO DISTORSIONADO, E INCLUSO CUANDO LO ABRO CON INTERNET EXPLORE NI SE VEN ALGÚNAS IMÁGENES, PEOR, Y ME APENA MUCHO ESO. YA QUE DESEARÍA QUE SE CHEKA MEJOR, EN TODOS LOS NAVEGADORES, POR QUE LA MAYORÍA N PERÚ UTILIZA INTERNET EXPLORE, IRÓNICO QUE JUSTO POR AHÍ TENGA QUE PASAR ESTO

Responder
Patán

Gem@, me cerraron mi Blog...........te envie un mail..

Responder
Gem@

:: Respondido está Patán, suerte!!

:: kawsaqi el tema de los navegadores puede conmigo es algo que me supera pero entiendo que cause malestar.
Prueba, y digo prueba porque no es seguro añadiendo la siguiente línea antes de <head>

<meta content='IE=8' http-equiv='X-UA-Compatible'/>

Responder
kawsaqi

grandioso, lo solucioné, era un tema de codificación, ahora cualquier navegador lo lee a la perfección, implementaré mas cosas,, pero arreglé una pero me veo envuelto en otra, se ve hacia la izquierda, traté de utilizar el código que usé inicialmente, div align=center, pero ahora ve que ya no puedo utilizar.. pues si tubiera algúna solución esto...cómo aría

Responder
Gem@

:: Hola kawsaqi me gustaría nos contaras que hiciste para que ahora se vea bien en todos los navegadores así lo sabemos para otra vez que ocurra.
Sobre centrarlo no veo que esté centrado con el html puedes probar en los estilos la parte de
#galeria ul {
display: table-cell;
overflow: hidden;
padding-top: 5px;
}

y dejarlo así, de esta forma aprovecha el espacio de la entrada.

#galeria ul {
display: table-cell;
overflow: hidden;
padding: 5px;
text-align: center;
}

Responder
kawsaqi

AHORA SI PUEDO SE PUEDE VER ESTUPENDO,MUCHAS GRACIAS. SOY NOVATO CON CSS, SE ALGO BÁSICO DE HTML, FLAHS. PERO LA ESTOY ENTRANDO Y BUSCANDO INFORMACIÓN QUE ME AYUDE CON ESTOS TEMAS.

"LO QUE HICE ES PROBAR Y PROBAR PRIMERO CON GLOOGLE CHROME Y LUEGO EN INTERNET EXPLORER MODIFICANDO EL HTML"

ES PREFERIBLE QUE ESTANDO ASÍ el html: "cambial la etiqueta <--> / li"
<-->
<--- alt="foto" src="URL-IMAGEN"/><--->Título


se ingrese de está manera:

<--><--- alt="foto" src="URL-IMAGEN"/><--->Título

"las lineas pueden corregir como el original"

bueno la diferencia no es algo sorprendente pero ayuda bastante, y en los diferentes navegadores se muestra lo mismo. no hay problema.

te agradezco mucho gem@ por la ayuda, así otros que tengan nuevas cosas o para poder mejorar algo de lo aportado, lo puedan dejar. saludos cordiales. KB

Responder
OCRE dg

Gem@, tengo u na pregunta. Si entras a http://ocredg.blogspot.com/p/trabajos-portfolio.html te darás cuenta que cuando sitúas el cursor sobre las imágenes (entradas), se crea un cuadrado naranja, pero quiero que el cuadrado naranja sea del mismo tamaño que las Imagenes, no mas grande como me aparece en mi blog?

Cual es el código que tengo que modificar?
Muchas gracias Gem@, tu post me ha sido de gan ayuda.

Responder
Gem@

:: kawsaqi gracias por tu aportación :) todas son bien recibidas porque en numerosas ocasiones tenemos respuesta en los mismos comentarios ;)

:: OCRE dg que buen trabajo :)
Prueba y en lo siguiente añade la línea en negrita:

#galeria ul li a img {
border: 5px solid #FFFFFF;
display: block;
height: 120px;
margin: -5px 0 0 -5px;
width: 220px;
padding: 0px;
}

Responder
OCRE dg

No funciona :S

Cuando pongo padding: 0px;
}

Directamente no me aparece el recuadro.

Responder
Gem@

:: Pues a mi si me funciona, prueba con:
padding: 0 !important;

Responder
Rodrigo Acuña Bravo

Hola Gema, como hago para insertar más imagenes hacia la derecha ?

Gracias

Saludos desde Chile!

atte.
Rodrigo

Responder
Gem@

:: Rodrigo, las imágenes se van adaptando al espacio que tengas hasta ocupar todo el ancho.

Responder
Rodrigo Acuña Bravo

Hola Gem@, gracias por la aclaración, sin embargo no logro encajar 3 imágenes juntas...me parece que podría lograrlo modificando los márgenes..no se...puedes ayudarme con mi sitio ? y otra cosa, la primera línea de imágenes sale "movida"..e´chale un vistazo,te dejo el blog

www.invasioncallejera.cl

Gracias x todo
y saludos desde Chile !

Rodrigo

Responder
Gem@

:: Rodrigo en tu blog no veo añadido la section id="galeria, cuando lo pongas me avisas ¿ok?

Responder
Bea

Hola Gema, me encantó la galería y quise ponerla a un nuevo diseño con el que estoy trabajando, pero no me sale... :( Sólo probé a poner una imagen para ver como quedaba y aquí te dejo como sale ¿alguna solución?
http://pruebas-8.blogspot.com/p/esn-photography-titulo-titulo-titulo.html

Responder
Rodrigo Acuña Bravo

Hola Gema, me había olvidado indicarte la pagina donde tengo la galeria...espero que ahora si me puedas ayudar

http://festivalinvasioncallejera.blogspot.com/p/companias.html

Muchas gracias x todo

Rodrigo
Saudos desde Chile

Responder
Bea

Al final pude solucionarlo con ayuda de mi hermano, gracias!! :D

Responder
OCRE dg

Hola GEM@, muchas gracias por tus aportes, y este especialmente ya que me re sirvio para postear mi portfolio online.
Mira como quedo y dime si te agrada, se admiten sugerencias:
www.ocredg.com.ar

Abrazos a todos y gracias nuevamente :D

Responder
Gem@

:: Genial si ya está soliconado bea :)

:: Rodrigo para que las imágenes queden agrupadas a tres por línea debes disminuir la anchura de las imágenes y de la opacidad del texto porque con la medida que tienen superan la anchura de la entrada y se desplazan a la línea siguiente.
Mira también el html porque en la primera y segunda imagen tienes añadida la etiqueta <br>

:: OCRE dg me gusta el diseño y veo que jugaste muy bien con el evento onmouseover.
Suerte con el sitio :)

Responder
Rodrigo Acuña Bravo

Ay Gema, eres muy amable pero ahí me entras a hablar un poco en chino porque no me manejo con soltura en html y ya no sé donde variar esos números...sé que es en los estilos, pero de ahí a cual parámtero modificar....

tampoco se donde están los
, en el html que coloco no lo veo...

soy muy lerdo?

saludos
rodrigo, desde Chile

Responder
Gem@

:: Rodrigo ya quisiera yo hablar en chino :) prueba a sustituir los estilos que es el código que añadiste antes de ]]></b:skin> por el siguiente.
Pero aún así tienes que editar de nuevo la parte que añadiste las imágenes que es el html y ahí encontrarás que hay etiquetas br que producen saltos de línea las quitas y listo.
¿Sabes que pasa? que cuando editamos algo en html y luego damos a la pestaña de Redactar para ver como queda Blogger altera el código es como si añadiera etiquetas indeseadas que lógicamente no las queremos y nos estropea todo. Acostúmbrate a ver las cosas en vista previa porque con el editor en Redactar te dará muchos quebraderos e cabeza.

#galeria ul {
overflow: hidden;
padding-top: 5px;
margin-left: -40px;
}
#galeria ul li {
display: inline;
}
#galeria ul li a {
display: block;
float: left;
margin: 0 10px -20px 15px;
width: 165px;
}
#galeria ul li a img {
border: 5px solid #FAFAFA;
display: block;
height: 135px;
margin: 35px 10px 15px;
width: 160px;
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
border-color: #EBEBEB;
}
#galeria ul li a:active img {
margin: -4px 0 -1px 15px;
}
#galeria ul li a span {
background-color: #191919;
color: #F2F2F2;
display: block;
font-size: 11px;
height: 20px;
letter-spacing: 0;
line-height: 18px;
opacity: 0.7;
padding: 2px;
position: relative;
text-indent: 4px;
text-transform: uppercase;
width: 155px;
word-spacing: 3px;
margin: -50px 10px 5px 20px ;
}
#galeria ul li.newfaces-icon a span {
display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
color: #CD4848;
}

Responder
OCRE dg

Jeje, tiene toda la razon GEM@, yo en un momento tube el mismo problema con las etiquetas br, hasta que me di cuenta.... tarde toda una tarde hurgando el código en busca del error. Una pregunta GEM@:
anteriormente me dijiste que uso el evento onmouseover, pero si te fijas ami me tarda unos dos seg o seg y medio en cargar la otra imagen, hay alguna forma de reducir ese tiempo? por descarte son las imagenes ya que son del tamaño justo y en 72 dpi. se puede? vi que en algunas paginas web lo hacen al instante.

Responder
Rodrigo Acuña Bravo

Muchas Gracias Gem@ nuevamente
funcionó perfecto y ahora tengo filas de a tres,
sin embargo el tema de los
me sigue intrigando ya que no los veo por ningún lado al entrar a editar...sólo aprecen cuando reviso el código fuente de la página...por otro lado..cada vez que abro el editor de aquella página, me dirige inmediatemente a la parte "Redactar", con lo que automáticamente se desconfigura el código, tal como dices...que problema aquel..por lo pronto lo soluciono porque tengo el borrador en un bloc de notas y desde ahí lo voy modificando..

eso estimada
agradecido de su ayuda, aún intrigado por lpos fsmosos br>, que no me salen por ninguna parte !!

Saludos
Rodrigo

Responder
ViaXti

Hola Gema... muchas gracias por el aporte... es la primera vez que comento... me encantan tus post... Saludos... Xti:D

Gem@

Gracias por el comentario Cristina :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top